<template>
    <div class="LoginBackground">
      <div class="LoginForm" >
        <div class="big-contain" >
          <el-form :model="loginForm" ref="loginForm" status-icon>
            <div class="bform">
              <el-form-item prop="username" :rules="loginRules.usernameRules" class="NameNotNull">
                <div class="UserName">
                    <input
                            class="Input"
                            type="text"
                            v-model="loginForm.username"
                            autocomplete="off"
                            placeholder="用户名"
                    />
                </div>
              </el-form-item>
              <el-form-item prop="password" :rules="loginRules.passwordRules" class="PasswordNotNull">
                <div class="PassWord">
                    <input
                            class="Input"
                            type="password"
                            v-model="loginForm.password"
                            autocomplete="off"
                            placeholder="密码"
                            @keydown.enter="handleLogin('loginForm')"
                    />
                </div>
              </el-form-item>
              <el-form-item>
                  <button class="LoginBtn" @click="handleLogin('loginForm')"/>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </div>
    </div>
</template>
<script>
import { loginRules } from "../utils/validator";

export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
      },
      loginRules,
    };
  },
  methods: {
    // 登录事件
    handleLogin(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$store
            .dispatch("app/login", this.loginForm)
            .then(() => {
               this.$store.dispatch("app/setMenuList");
              this.$router.replace("/");
            })
            .catch(() => {
              this.$message.error("账号或密码错误");
            });
        } else {
          this.$notify.error({
            title: " 错误",
            message: " 请输入正确的用户名密码",
          });

          return false;
        }
      });
    }
  },
};
</script>
<style scoped>
  .LoginBackground{
    background: url("../assets/LoginBackground.jpg") no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    overflow: hidden;

  }
  .LoginForm{
    background: url("../assets/Login.png") no-repeat;
    background-size: 800px,599px;
    width: 1000px;
    height: 800px;
    margin-left: 555px;
    margin-top: 100px;
    overflow: hidden;
  }
  .UserName{
      overflow: hidden;
      border:2px solid #2abeb2;
      border-radius: 20px;
      margin-top: 270px;
      margin-left: -60px;
      height: 70px;
      width: 530px;
  }
  .PassWord{
      overflow: hidden;
      border:2px solid #2abeb2;
      border-radius: 20px;
      margin-top: 20px;
      margin-left: -60px;
      height: 70px;
      width: 530px;
  }
  .Input{
      overflow: hidden;
      margin-left: 20px;
      height: 80px;
      font-size: 35px;
      color: #2abeb2;

  }
  .Logo{
      overflow: hidden;
      margin-left: 15px;
      margin-bottom: 5px;
  }
  .LoginBtn{
      overflow: hidden;
      background: url("../assets/LoginButton.png");
      background-size: 100%;
      width: 220px;
      height: 65px;
      margin-left: 290px;
      margin-top: 10px;
  }
  .NameNotNull{
      margin-left: 200px;

  }
  .PasswordNotNull{
      margin-left: 200px;
  }
  input::-webkit-input-placeholder {
      color: #2abeb2;
  }
  input::-ms-input-placeholder {
      color: #2abeb2;
  }

</style>